<template>
  <div class="pk-gooditem">
    <div class="pk-gooditem-pc" v-if="ISPC">
      <div class="pk-gooditem-timetitle f-12">截至日期：{{ data.time }}</div>
      <div class="pk-gooditem-time f-14 mt-12 bold">{{ data.job_name }}</div>
      <div class="pk-gooditem-time f-12 mt-12">{{ data.company_name }}</div>
      <div class="pk-gooditem-time f-12 mt-12 flex-row">
        <div>附件:</div>
        <div v-if="data.state == null || data.state < 2" >
          <span v-if="(data.state == 1 && ISREMAR) || data.attachment_id" @click="isDialog=true" class="flex-row color-blur justify-center align-items-center">点击更换 <el-icon><Right /></el-icon></span>
          <span v-else @click="isDialog=true" class="color-blur">上传简历</span> 
        </div>
        <div v-if="data.state >= 2">
          {{data.attachment_id ? '已上传': ''}}
        </div>
      </div>
      <div class="flex-row mt-24">
       <div class="mr-12" v-if="data.state == null" >
        <pk-button type="success" size="small" @click="handlerAccept(1)">接受</pk-button>
       </div>
        <div class="mr-12" v-if="data.state == null"><pk-button type="danger" size="small" @click="handlerAccept(0)">拒绝</pk-button></div>
        <div class="mr-12" v-if="data.state == 1">
          <pk-button type="success" size="small" @click="hanlderOpen">开启面试</pk-button>
        </div>
        <div v-if="data.state >= 3"><pk-button type="success" size="small">面试结束</pk-button></div>
        <div v-if="data.state == 2"><pk-button type="success" size="small">面试中</pk-button></div>
        <div v-if="data.state == 0"><el-button type="danger" size="small">已拒绝</el-button></div>
        
      </div>
    </div>
    <div class="pk-gooditem-code flex-col align-items-center" v-if="!ISPC" >
      <pk-canvas :modelValue="linkPath" width="160" height="160">
        <div class="f-12">微信扫一扫，立即面试</div>
      </pk-canvas>
    </div>
    <div class="pk-gooditem-codeicon" @click="setCode"></div>  
    <pk-dialog title="选择简历" @onClose="isDialog=false" v-if="isDialog" @confirm="confirm">
      <resume-component @onEmit="onEmit" :aloading="loading" v-if="isDialog"></resume-component>
    </pk-dialog>

    <pk-dialog :footer="false" v-if="isInterview" @onClose="isInterview=false">
      <div>
        <div>本次面试链接三小时有效。请尽快参与面试 </div>
        <div class="mt-24 pk-gooditem-link">
          {{linkPath}}
        </div>
        <div class="mt-24 flex-row align-items-center justify-center">
          <el-button type="success" @click="handlerBtn">确认前往</el-button>
        </div>
      </div>
    </pk-dialog>
  </div>
</template>

<script setup>
  import { ref, onMounted, defineProps, defineEmits } from 'vue'
  import { Right } from '@element-plus/icons-vue'
  import { selectAttachment, generateSession, invitationOperate } from '@/api/api'
  import pkButton from '@/components/pkui/pkbutton/pkbutton.vue'
  import pkCanvas from '@/components/pkui/pkcanvas/pkcanvas.vue'
  import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
  import resumeComponent from './resume.vue'
  import { Toast } from '@/utils/vant'
  const emits = defineEmits(['onEmit'])
  const props = defineProps({
    data: {
      type: Object,
      default: () => {}
    }
  })
  const isInterview = ref(false)
  const loading = ref(false)
  const isDialog = ref(false)
  const linkPath = ref('')
  const ISPC = ref(true)
  const ISREMAR = ref(false)
  const curData = ref(null)
  const setCode = () => {
    if (props.data.state != 1) {
      return
    }
    if (!ISREMAR.value && !props.data.attachment_id) {
      Toast("简历没有上传")
      return
    }
    if (ISPC.value) { 
      generateSession({
        scene: "A",
        channel_id: props.data.interview_id
      }).then(res => {
        linkPath.value = res.data
        ISPC.value = false
      }) 
    } else {
      ISPC.value = true
    }
  }

  const handlerAccept = (e) => {
  invitationOperate({
    interview_id: props.data.interview_id,
    is_accept: e
  }).then(res => {
    emits('onEmit')
  })
}

  const confirm = () => {
    if (!curData.value) {
      return
    }
    loading.value = true
    selectAttachment({
      interview_id: props.data.interview_id,
      attachment_id: curData.value.attachment_id
    }).then(res => {
      ISREMAR.value = true
      isDialog.value = false
      loading.value = false
    }).catch(err => {
      loading.value = false
    }) 
  }

  // 开启面试
  const hanlderOpen = () => {
    if (!ISREMAR.value && !props.data.attachment_id) {
      Toast("简历没有上传")
      return
    }

    generateSession({
      scene: "A",
      channel_id: props.data.interview_id
    }).then(res => {
      linkPath.value = res.data
      // ISPC.value = false
      isInterview.value = true
    }) 

  }


  const handlerBtn = () => {
    window.open(linkPath.value, '_blank')
  }
  const onEmit = (e) => {
    curData.value = e
  } 

</script>

<style lang="scss" scoped>
.pk-gooditem{
  padding: 24px 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 0px 0px 1px rgba(140, 140, 140, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  height: 180px;
  &-pc{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  &-codeicon{
    background: url("@/assets/icon/qrcode.svg") center center no-repeat;
    background-size: 20px auto;
    width:30px;
    height:30px;
    position: absolute;
    top:0;
    right: 0;
  }
  &-timetitle{
    text-align:left;
    width: 100%;
  }
  &-codeicon::after{
    content: '';
    width: 64px;
    height: 1px;
    background: #ddd;
    position: absolute;
    top: 22px;
    left: -25px;
    transform: rotate(45deg)
  }
  &-link{
    border:#eee 1px solid;
    padding: 12px;
    background: #f8f8f8;
    min-height: 50px;
    border-radius: 4px;
  }
}
</style>